<template>
  <div class="loginWrap">
    <div class="loginBox">
      <h1 class="loginTitle">用户登录</h1>
      <div class="loginForm">
        <el-input v-model="loginInfo.username" placeholder="请输入用户名" class="loginItem"></el-input>
        <el-input v-model="loginInfo.password" placeholder="请输入密码" class="loginItem"></el-input>
        <el-checkbox v-model="remPwdchecked" class="remPwd">记住密码</el-checkbox>
        <el-button type="primary" class="loginBtn" @click="loginClick">登录</el-button>
      </div>
    </div>
  </div>

</template>

<script>
	export default {
		name: "Login",
    data() {
			return {
				loginInfo: {
					username: 'admin',
          password: '123456'
        },
				remPwdchecked: false
      }
    },
    methods: {
      loginClick() {
      	let url = '/login';
      	this.postRequest(url, this.loginInfo).then(res => {
      		let resdata = res.data;
      		if (resdata.code === 0) {
      			this.$router.push('/home');
          }
				});
      }
    },
    created() {

		}
	}
</script>

<style scoped>
  .loginWrap {
    width: 100%;
    height: 100%;
    background-color: rgb(224, 228, 232);
  }

  .loginBox {
    width: 17%;
    /*height: 57%;*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    /*box-shadow:#000 0 0 10px;*/
    border-radius: 4px;
    border: 1px rgba(0,0,0,.12);
    /*padding: 10px 36px;*/
    padding: 10px 36px 26px;
  }

  .loginTitle {
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    font: 400 24px/32px -apple-system,Noto Sans,Helvetica Neue;
  }

  .loginForm {
    width: 100%;
    margin-top: 67px;
    display: flex;
    flex-direction: column;
  }

  .loginItem {
    margin-bottom: 15px;
  }

  .loginBtn {
    margin-top: 56px;
    margin-bottom: 16px;
    letter-spacing: 16px;
  }

  .remPwd {
    position: absolute;
    bottom: 80px;
    left: 20%;
    margin-bottom: 21px;
  }

</style>